<script lang="ts">
import { defineComponent } from "vue";

import PopupOverlay from "./overlay.vue";
import IconClose from "../icon/close.vue";

export default defineComponent({
  components: { PopupOverlay, IconClose },
  props: {
    modelValue: Boolean,
    title: String,
    showClose: { type: Boolean, default: true },
    closeOnClickOverlay: { type: Boolean, default: true },
    zIndex: { type: Number, default: 98 },
    translateY: { type: String, default: "-65%" },
  },
  emits: {
    "update:modelValue": (value: boolean) => typeof value === "boolean",
  },
  setup(props, ctx) {
    const overlayClick = () => {
      props.closeOnClickOverlay && closeClick();
    };

    const closeClick = () => {
      ctx.emit("update:modelValue", false);
    };
    return { overlayClick, closeClick };
  },
});
</script>

<template>
  <PopupOverlay
    :modelValue="modelValue"
    :zIndex="zIndex"
    @update:modelValue="overlayClick"
  />

  <uni-transition
    :show="modelValue"
    mode-class="fade"
    :styles="{
      position: 'fixed',
      left: '50%',
      top: '50%',
      paddingTop: showClose ? '50rpx' : '',
      borderRadius: '40rpx',
      backgroundColor: '#ffffff',
      transform: `translate(-50%, ${translateY})`,
      zIndex,
    }"
  >
    <image
      class="popup-center-bg"
      src="/static/popup-modal-bg.png"
      mode="widthFix"
    />

    <view class="popup-center-close" v-if="showClose" @click="closeClick">
      <IconClose />
    </view>

    <view class="popup-center-title" v-if="title">{{ title }}</view>

    <slot />
  </uni-transition>
</template>

<style lang="scss">
.popup-center-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.popup-center-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
}

.popup-center-title {
  margin-bottom: 20rpx;
  font-size: 32rpx;
  color: #333333;
  line-height: 44rpx;
  text-align: center;
  font-weight: bold;
}
</style>